﻿@{
ViewData["Title"] = "修改采购单";
}
<fieldset class="layui-elem-field layui-col-md8 layui-col-md-offset2 " style="margin-top:10px;">
	<legend>修改采购单</legend>
	<div class="layui-field-box">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">供应商</label>
				<div class="layui-input-inline" style="width:190px;">
					<select name="supplierName" id="supplierName" lay-verify="required" lay-filter="aihao">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">单据日期</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" lay-verify="required" name="datetime"
						id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
				</div>
				<label class="layui-form-label">单号</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="text" name="id" id="id" autocomplete="off" lay-affix="clear" class="layui-input"
						disabled>
				</div>
				<label class="layui-form-label">
					<i class="layui-icon layui-icon-rmb layui-font-red layui-font-14"></i>
					单据金额
				</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="text" id="money" name="money" autocomplete="off" lay-affix="clear" class="layui-input"
						disabled>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">采购物品</label>
				<div class="layui-input-inline" style="width:190px;">
					<select name="goodsName" id="goodsName" lay-verify="required" lay-filter="aihao">
						<option value=""></option>
					</select>
				</div>
				<label class="layui-form-label">采购数量</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="number" id="amount" name="amount" lay-verify="required" autocomplete="off"
						lay-affix="clear" class="layui-input">
				</div>
				<label class="layui-form-label">采购单价</label>
				<div class="layui-input-inline layui-input-wrap">
					<input type="number" id="price" name="price" lay-verify="required" autocomplete="off"
						lay-affix="clear" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block" style="text-align:center; margin-left:0px;">
					<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
					<button type="button" class="layui-btn layui-btn-primary layui-bg-red" lay-on="del">删除</button>
				</div>
			</div>
		</form>
	</div>
</fieldset>


@section Scripts {
<script>
	$(function() {
		layui.use(['form', 'laydate', 'util'], function() {
			var form = layui.form;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var util = layui.util;

			// 提交事件
			form.on('submit(demo1)', function(data) {
				var field = data.field;
				$.ajax('/api/PurchaseOrder/Edit', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					data: JSON.stringify(field),
					success: function(result) {
						layer.msg('修改采购单成功');
						setTimeout(function() {
							window.location.href = "/Purchase/Query";
						}, 1000);
					},
					error: function(err) {
						console.log(err);
					}
				})
				return false;
			});

			// 日期
			laydate.render({
				elem: '#ID-laydate-type-datetime-1',
				type: 'datetime',
				fullPanel: true
			});


			//获取供应商信息
			const apiUrl = "/api/Supplier/AllName";
			$.ajax({
				url: apiUrl,
				method: 'GET',
				dataType: 'json',
				success: function(data) {
					// 动态渲染选项
					$.each(data, function(index, supplier) {
						$('#supplierName').append(
							$('<option>', {
								value: supplier, // 设置选项的值
								text: supplier // 设置选项的显示文本
							})
						);
					});
					// 重新渲染表单
					form.render('select');
				},
				error: function(error) {
					console.error('获取数据失败:', error);
				}
			});

			//获得物品数据
			const apiUrl2 = "/api/Goods/AllName";
			$.ajax({
				url: apiUrl2,
				method: 'GET',
				dataType: 'json',
				success: function(data) {
					// 动态渲染选项
					$.each(data, function(index, goods) {
						$('#goodsName').append(
							$('<option>', {
								value: goods, // 设置选项的值
								text: goods // 设置选项的显示文本
							})
						);
					});
					// 重新渲染表单
					form.render('select');
				},
				error: function(error) {
					console.error('获取数据失败:', error);
				}
			});

			//获取单据数据
			const path = window.location.pathname;
			const parts = path.split("/");
			const targetValue = parts[parts.length - 1];
			$.ajax({
				url: "/api/PurchaseOrder/One/" + targetValue,
				method: 'GET',
				dataType: 'json',
				success: function(data) {
					$("#id").val(data.id);
					$("#supplierName").val(data.supplierName);
					$("#goodsName").val(data.goodsName);
					$("#amount").val(data.amount);
					$("#price").val(data.price);
					$("#money").val(data.money);
					$("#ID-laydate-type-datetime-1").val(data.createDateTime);
					form.render('select');
				},
				error: function(error) {
					console.error('获取数据失败:', error);
				}
			});

			//删除按钮
			util.on('lay-on', {
				del: function() {
					layer.confirm('确认要删除吗？', {
						btn: ['确定', '关闭'] //按钮
					}, function() {
							const inputElement = document.getElementById("id");
							const value = inputElement.value;
						$.ajax({
								url: `/api/PurchaseOrder/Del?id=${value}`,
							type: "DELETE",
							success: function(response) {
									layer.msg('删除成功');
								setTimeout(function() {
									window.location.href = "/Purchase/Query";
							}, 1000);
							},
							error: function(xhr, status, error) {
								console.error("删除失败:", error);
							}
						});
						
					}, function() {
						layer.msg('好的', {
							time: 2000,
						});
					});
				},
			});

		});
	});


	//监听单价、数量输入框以计算金额
	const amount = document.getElementById('amount');
	const price = document.getElementById('price');
	const money = document.getElementById('money');
	//添加输入事件
	amount.addEventListener('input', calculateAmount);
	price.addEventListener('input', calculateAmount);
	//计算金额
	function calculateAmount() {
		const a = parseFloat(amount.value);
		const b = parseFloat(price.value);
		const c = a * b;
		money.value = c.toFixed(2);
	}
</script>
}